<template>
  <view class="padding-xl bg-cus-blue" style="min-height:100vh">
    <evan-form :hide-required-asterisk="true" :label-style="labelStyles" 
        ref="form" :model="formInfo"
        class="padding-lg bg-white" style="border-radius:8px">
      
      <view class="margin-top-xl text-center text-primary text-xl margin-bottom-lg">
        唐山阳性病例上报系统 
      </view>
      
      <evan-form-item prop="userName">
        <view class="flex align-center w100">
          <text class="cuIcon-group text-lg margin-right"></text>
          <input style="flex:1" type="text" v-model="formInfo.userName" placeholder="请输入您的用户名" />
        </view>
      </evan-form-item>
      <evan-form-item prop="password">
        <view class="flex align-center w100">
          <text class="cuIcon-lock text-lg margin-right"></text>
          <input style="flex:1" type="text" :password="!showPassword" v-model="formInfo.password" placeholder="请输入密码" />
          <text class="text-lg padding-tb" @click="showPassword = !showPassword" :class="{'cuIcon-attention': showPassword, 'cuIcon-attentionforbid': !showPassword }"></text>
        </view>
      </evan-form-item>
      <evan-form-item prop="verificationCode">
        <view class="flex align-center w100">
          <input style="flex:1" type="text" v-model="formInfo.verificationCode" placeholder="请输入密验证码" />
          <view class="text-bold text-center" style="width:80px;height:24px;line-height:24px">QIJD</view>
        </view>
      </evan-form-item>

      <view class="margin-top-xl">
        <button :disabled="submiting" @click="onSubmit" class="cu-btn lg btn-fluid bg-primary">上报</button>
      </view>
    </evan-form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      labelStyles: {
        minWidth: '150px',
        textAlign: 'justify',
        paddingRight: '30upx',
        fontSize: '30upx',
        color: 'inherit',
      },
      submiting: false,
      formInfo: {
        userName: '',
        password: '',
        verificationCode: ''
      },
      formRules: {
        userName: [{ required: true, message: `请输入用户名` }],
        password: [{ required: true, message: `请输入密码` }],
        verificationCode: [{ required: true, message: `请输入验证码` }],
      },
      showPassword: false,
    }
  },
  watch: {
    submiting(val) {
      if (val) {
        uni.showLoading()
      } else {
        uni.hideLoading()
      }
    },
  },
  onLoad(opts) {
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((res) => {
        if (res) {
          this.$utils.pLog('== submiting: ', this.formInfo)
        }
      })
    },
  },
}
</script>

<style scoped>
.bg-cus-blue {
  background: #3182F8;
}
</style>